import React, { Component } from 'react'

const color = {
    success: '#52c41a',
    error: '#f5222d',
    warn: '#faad14',
    invalid: '#bfbfbf'
}
let defaultSize = 12
class Status extends Component {
    render() {
        const { status, text, size } = this.props
        if (size) {
            defaultSize = size
        }
        return <span style={{
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            height: `${defaultSize * (16 / 12)}px`,
            overflow: 'hidden'
        }}>
            <span style={{
                width: `${defaultSize / 1.2}px`,
                height: `${defaultSize / 1.2}px`,
                borderRadius: `${defaultSize / 2.2}px`,
                backgroundColor: color[status],
                marginRight: `${defaultSize * (8 / 12)}px`
            }} />
            <span style={{
                fontSize: `${defaultSize}px`,
                textAlign: 'center',
                height: '100%',
                lineHeight: '100%',
                color: color[status]
            }}>{text}</span>
        </span>
    }
}
export default Status